<template>
  <!-- videoDetail2 普通的联动详情 -->
  <div class="video-detail mediumtablestyle">
    <div class="top betweenbox">
      <div>视频详情</div>
      <div class="top-back" @click="goBack"></div>
    </div>
    <div class="main betweenbox">
      <div class="main-left colbetweenbox">
        <div class="borderStyle">
          <div class="title blueTitleStyle">告警信息</div>
          <div class="content">
            <div class="nameAndRes">{{gjzs.stationName}}&nbsp;&nbsp;{{gjzs.reason}}</div>
            <div class="icon colors">
              <span>{{gjzs.createTime}}</span>
            </div>
          </div>
        </div>

        <div class="borderStyle ldkzxx">
          <div class="title blueTitleStyle">联动控制信息</div>
          <div class="content">
            <el-table
              border
              :data="Data2"
              style="width: 100%"
              height="100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="deviceName" label="联动设备"></el-table-column>
              <el-table-column prop="commandName" label="当前状态"></el-table-column>
            </el-table>
            <div class="dialog">
              <el-button @click="envDialogVisible=true">环境信息</el-button>
              <el-button @click="xfDialogVisible=true">消防信息</el-button>
              <el-button @click="zxjcDialogVisible=true">在线监测信息</el-button>
            </div>
          </div>
        </div>
        <div class="borderStyle">
          <div class="title blueTitleStyle">联动视频信息</div>
          <div class="content">
            <el-table
              border
              :data="Data3"
              style="width: 100%"
              height="100%"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="videoName" label="摄像头名称"></el-table-column>
              <el-table-column prop="positionName" label="预置位名称"></el-table-column>
            </el-table>
          </div>
        </div>
        <div>
          <el-button type="primary" v-if="isBtn" @click="goTask">发起特巡</el-button>
        </div>
      </div>
      <div class="main-right">
        <rightVideo :datas="newData3" />
      </div>
    </div>
    <!-- 环境信息弹窗 -->
    <el-dialog
      title="环境信息"
      :visible.sync="envDialogVisible"
      width="70%"
      :before-close="envIfoClsoe"
    >
      <EnvPopup v-if="envDialogVisible"></EnvPopup>
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
    <!-- 消防信息弹窗 -->
    <el-dialog title="消防信息" :visible.sync="xfDialogVisible" width="50%" :before-close="xfIfoClsoe">
      <XfxxPropup v-if="xfDialogVisible"></XfxxPropup>
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
    <!-- 在线监测信息弹窗 -->
    <el-dialog
      title="在线监测信息"
      :visible.sync="zxjcDialogVisible"
      width="70%"
      :before-close="zxjcIfoClsoe"
    >
      <!-- 在线监测信息弹窗内容 -->
      <ZxjcPropup v-if="zxjcDialogVisible"></ZxjcPropup>
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import rightVideo from "./rightVideo.vue";
import qs from "qs";
import EnvPopup from "../../components/videoDetailC/index.vue";
// import EnvPopup from "../../components/videoDetailC/envInfo.vue";
import XfxxPropup from "../../components/videoDetailC/xfxx.vue";
import ZxjcPropup from "../../components/videoDetailC/zxjcIfo.vue";
import { GetSocketModule } from "@/store/modules/GetSocketData";

interface optionList {
  value: string;
  label: string;
}
@Component({ components: { rightVideo, EnvPopup, XfxxPropup, ZxjcPropup } })
export default class extends Vue {
  envDialogVisible: Boolean = false;
  xfDialogVisible: Boolean = false;
  zxjcDialogVisible: Boolean = false;
  Data1: string = "";
  Data2: any = [];
  Data3: any = [];
  gjzs: any = [];
  //发起特巡按钮
  isBtn = false;
  mounted() {
    console.log(this.$route.query);
    if (
      JSON.parse(localStorage.getItem("userinf")).orgValue ==
      "8a1ea5c64bdebad1014bdebc5c21078c"
    ) {
      this.isBtn = true;
    }
    this.fetch(this.$route.query.id);
    // console.log(this.$route.query);
    console.log(this);
    this.gjzs = this.$route.query;
  }

  fetch(id) {
    var params: any = {
      id: id,
    };
    // console.log(params);
    (this as any).$services
      .getLinkageParticulars({ method: "post", data: params, postparams: true })
      .then((result: any) => {
        // console.log(result.data);
        if (result.data) {
          this.Data1 = result.data.linkageReason;
          this.Data2 = result.data.operationPointerList;
          this.Data3 = result.data.operationVideoPosition;
          // console.log(this.Data3);
          // console.log(result.data);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 返回联动事件查询
  goBack() {
    window.history.back();
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  results: any = {};
  goTask() {
    // this.$router.push({
    //   path: "/jointInspection/task",
    // });

    var zrw = ["15000000010300417471"];

    const loading = this.$loading({
      lock: true,
      text: "loading",
      spinner: "el-icon-loading",
      background: "rgba(0,0,0,.7)",
    });
    var params = {
      bdzid: "1500000001",
      bz: "",
      czzt: "xz",
      dq: [],
      lj: "lj",
      rwmc: "220kV天平变电站专项巡检",
      xjlx: "3",
      zq: [],
      zrw: zrw,
    };

    (this as any).$services
      .xzRwSave({
        data: { xzrwParam: params },
        method: "post",
        postparams: true,
      })
      .then((result: any) => {
        console.log(result);
        if (result.data) {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.results = result.data;
          var params2 = {
            bdzid: "1500000001",
            bz: "",
            czzt: "xz",
            dq: [],
            lj: result.data.lj,
            rwid: result.data.rwid,
            rwmc: "220kV天平变电站专项巡检",
            xjlx: "3",
            zq: [],
            zrw: zrw,
          };
          (this as any).$services
            .xzrwRwxfButton({
              data: { xzrwParam: params2 },
              method: "post",
              postparams: true,
            })
            .then((result: any) => {
              if (result.data) {
                let form = {
                  page: 1, // 第几页
                  rows: 20, // 每页多少条
                  ssds: "", // 所属地市ID
                  bdzMc: "1500000001", // 变电站ID
                  rwzt: "1", // 任务状态
                  whbz: "", // 维护班组
                  xjlx: "3", // 巡检类型
                };
                console.log(form);
                setTimeout(() => {
                  (this as any).$services
                    .getRwglDetail({ data: form, method: "get" })
                    .then((result: any) => {
                      console.log("result:", result);
                      let data = result.data.rows;
                      console.log(this.results);

                      var data2 = data.filter((v) => {
                        return v.ZXQKID == this.results.lj;
                      });
                      console.log(data2, this.results.lj);
                      if (data2[0].STATUS == "1") {
                        loading.close();
                        let query = {
                          bdzid: data2[0].BDZID,
                          queryId: data2[0].JHID, //当前列表里的ID
                          xslx: data2[0].XSLX,
                          id: data2[0].MID, //传进来的计划id
                          xsfs: data2[0].XSFS,
                          oldoldrouter: "plan",
                        };
                        let search = qs.stringify(query);
                        let url = `/inspectionmonitor/#/jointInspection/inspectionmonitor?${search}`;
                        window.open(url, "_blank");
                      } else {
                        loading.close();
                        window.open(
                          "http://10.192.102.43:28884/inspectionmonitor/#/jointInspection/inspectionmonitor?bdzid=1500000001&queryId=1500000001160791233920201227183905&xslx=3&id=890b44b8-17f7-45fb-af9e-191c7d18d17d1&xsfs=0&oldoldrouter=plan",
                          "_blank"
                        );
                      }
                    })
                    .catch((err: object) => {
                      console.log(err);
                    });
                }, 5000);
                this.$message({
                  type: "success",
                  message: `${result.message}`,
                });
              }
            })

            .catch((err: object) => {
              console.log(err);
              this.$message({
                type: "warning",
                message: "下发失败",
              });
              loading.close();
            });
        }
      })
      .catch((err: object) => {
        console.log(err);
        this.$message({
          type: "warning",
          message: "保存失败",
        });
      });
  }

  //环境信息 消防信息 在线监测信息 里面是否有告警
  init(routerIfo) {
    let AllAuxiliary = GetSocketModule.getterAllAuxiliaryPointer || [];
    // console.log(AllAuxiliary);
    let newArea = "";
    for (var i = 0; i < AllAuxiliary.length; i++) {
      let item = AllAuxiliary[i];
      if (item.deviceId === routerIfo.deviceId) {
        console.log(item, 8989);

        newArea = item.area;
        break;
      }
    }
    let newData = [];
    AllAuxiliary.forEach((v) => {
      if (
        v.area === newArea &&
        // &&(v.remoteType === "1" || v.remoteType === "2")
        v.xtValue === "03" &&
        v.bayId === routerIfo.bayId
        // && v.deviceId === routerIfo.deviceId
      ) {
        newData.push(v);
      }
    });
  }

  // 视频信息
  get newData3() {
    let data = this.Data3;
    return data;
  }
  envIfoClsoe() {
    this.envDialogVisible = false;
  }
  xfIfoClsoe() {
    this.xfDialogVisible = false;
  }
  zxjcIfoClsoe() {
    this.zxjcDialogVisible = false;
  }
}
</script>

<style lang="scss" scoped>
.video-detail {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 0.4rem;
  }
  .main {
    width: 100%;
    height: calc(100% - 0.4rem);

    .title {
      height: 0.3rem;
      font-size: 0.18rem;
      line-height: 0.3rem;
    }
    .content {
      width: 100%;
      height: calc(100% - 0.3rem);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .colors {
        margin-bottom: 0.1rem;
        margin-right: 0.2rem;
        > span {
          float: right;
          font-size: 0.16rem;
          color: #999;
        }
      }
    }
    .ldkzxx {
      .content {
        display: flex;
        flex-direction: column;
        .el-table {
          flex: 3;
        }
        .dialog {
          flex: 1;
          display: flex;
          align-items: center;
          .el-button {
            width: 100%;
            height: 80%;
            flex: 1;
            justify-content: space-around;
            padding: 0.05rem 0.1rem;
            margin-bottom: 0.1rem;
            background-color: rgba(29, 103, 103, 0.2);
          }
        }
      }
    }
    &-left {
      width: 3.5rem;
      height: 100%;
      > div:nth-child(1) {
        height: 20%;
      }
      > div:nth-child(2) {
        height: 30%;
      }
      > div:nth-child(3) {
        height: calc(50% - 0.96rem);
      }
      > div:nth-child(4) {
        height: 0.36rem;
      }
    }
    &-right {
      width: calc(100% - 3.7rem);
      background-color: #000;
    }
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>
